import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native';
import {Navigation} from 'react-native-navigation';
import Config from './../../storage/config';

// import {defer} from 'rxjs';

export default function index(props) {
  // console.log(props);
  // console.log(Dimensions.get('window').width);
  const t = [];
  const [list, setList] = useState([]);
  useEffect(async () => {
    if (list.length != 0) {
      return;
    }
    let nowPage = 1,
      pageCount = 5;
    // 下面注释的代码
    let result = await Config.getProductList({nowPage, pageCount});
    setList(result);

    //使用rxjs来取消一个异步的订阅
    // const subscriptoin = defer(() => {Config.getProductList({nowPage, pageCount})}).subscribe(setList);

    //
    return () => {
      //当组件销毁时，处理fetch请求还没有结束的问题；
      setList = () => false;
    };
  }, []);
  return (
    <View style={PdtStyles.container}>
      <Text style={PdtStyles.title}>这是产品列表页面</Text>
      <View>
        <Text
          onPress={() => {
            Navigation.push(props.componentId, {
              component: {
                name: 'PrtDetail',
                passProps: {
                  id: 123,
                  title: '商品名称sdfsf',
                },
              },
            });
          }}>
          eq:跳转到产品详细页面
        </Text>
      </View>
      <View>
        {list.length > 0 &&
          list.map(item => {
            return (
              <View key={item.tid} style={PdtStyles.list}>
                <Text style={PdtStyles.serialNumber}>{item.tid}</Text>
                <Text style={PdtStyles.teamName}>{item.contractTeam}</Text>
                <Text
                  style={PdtStyles.newButton}
                  onPress={() => {
                    Navigation.push(props.componentId, {
                      component: {
                        name: 'PrtDetail',
                        passProps: {
                          id: item.tid,
                          title: item.contractTeam,
                        },
                      },
                    });
                  }}>
                  查看
                </Text>
              </View>
            );
          })}
      </View>
    </View>
  );
}

const PdtStyles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 22,
    color: 'red',
    fontWeight: '700',
  },
  list: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  serialNumber: {
    width: 40,
  },
  teamName: {
    width: 200,
  },
  newButton: {
    fontSize: 12,
    padding: 2,
    width: 80,
  },
});
